<template>
  <div>
    <!-- 筛选 订单状态 -->
    <ContentWrap :show-border="false">
      <SearchBox
        :queryForm="searchList"
        :showExpland="false"
        :showLen="5"
        @query="handleSearchQuery"
      />
    </ContentWrap>
    <div class="w-full h-[1px]" style="border-bottom: 1px dashed #ddd"></div>
    <ContentWrap :show-border="false">
      <div class="flex items-baseline titbox">
        <div class="text-[16px] text-[#101010] font-semibold mr-[8px] tit">数据概览</div>
        <div class="text-[#999] text-[12px] desc">数据每2小时更新，当前统计至2023-02-1620:00</div>
        <div class="w-[12px] h-[12px] ml-[4px] cursor-pointer refreshbox">
          <img :src="RefreshPng" class="w-full h-full object-contain" />
        </div>
      </div>
      <div class="mt-[24px] w-full flex info">
        <div
          class="rounded-[10px] bg-[#fdfdfe] w-[288px] pt-[28px] pb-[39px] px-[16px] mr-[20px] shrink-0 total"
          :style="`border: 1px solid #f7f7fb;background:url('${Img07Png}') no-repeat right bottom,#fdfdfe;`"
        >
          <div class="flex items-center title">
            <div
              class="w-[8px] h-[8px] rounded-[50%] circle"
              style="border: 2px solid #3721ff"
            ></div>
            <div class="text-[#999] text-[14px] ml-[10px] tit">总广告花费(外币)</div>
          </div>
          <div class="pl-[15px] mt-[4px] flex items-baseline money">
            ￥
            <div class="text-[#101010] font-bold text-[20px] m">134</div>
            <div class="text-[#101010] font-bold text-[14px] d">.20</div>
          </div>
          <!-- <div class="pl-[15px] text-[#999] text-[12px] unit"> 单位$/￥ </div> -->
        </div>
        <!-- <div class="mx-[4px] shrink-0 eq">
          <img :src="EqPng" class="w-full h-full object-contain" />
        </div> -->
        <div class="scrollbox" ref="scrollboxRef" style="width: calc(100% - 232px)">
          <div
            class="flex cursor-pointer items-center w-full srcollRight"
            @mousedown="startDrag"
            @mouseup="stopDrag"
            @mouseleave="stopDrag"
            @mousemove="doDrag"
            :style="{ transform: `translateX(${translateX}px)` }"
          >
            <div class="flex gap-x-[20px]" ref="scrollRightRef" style="user-select: none">
              <div
                class="rounded-[10px] w-[288px] pt-[28px] pb-[39px] px-[16px] shrink-0 total"
                :style="`border: 1px solid #f7f7fb;background:url('${Img08Png}') no-repeat right bottom,#fdfdfe;`"
              >
                <div class="flex items-center title">
                  <div class="text-[#999] text-[14px] ml-[10px] tit">广告总花费（$）</div>
                </div>
                <div class="pl-[10px] mt-[4px] flex items-baseline money">
                  ￥
                  <div class="text-[#101010] font-bold text-[20px] m">0</div>
                  <div class="text-[#101010] font-bold text-[14px] d">.00</div>
                </div>
                <!-- <div class="pl-[15px] text-[#999] text-[12px] unit"> 单位$ </div> -->
              </div>
              <!-- <div class="mx-[4px] shrink-0 plus">
                <img :src="PlusPng" class="w-full h-full object-contain" />
              </div> -->
              <div
                class="rounded-[10px] w-[288px] pt-[28px] pb-[39px] px-[16px] shrink-0 total"
                :style="`border: 1px solid #f7f7fb;background:url('${Img09Png}') no-repeat right bottom,#fdfdfe;`"
              >
                <div class="flex items-center title">
                  <div class="text-[#999] text-[14px] ml-[10px] tit">展示总次数</div>
                </div>
                <div class="pl-[10px] mt-[4px] flex items-baseline money">
                  <div class="text-[#101010] font-bold text-[20px] m">0</div>
                  <!-- <div class="text-[#101010] font-bold text-[14px] d">.00</div> -->
                </div>
                <!-- <div class="pl-[15px] text-[#999] text-[12px] unit"> 单位$ </div> -->
              </div>
              <!-- <div class="mx-[4px] shrink-0 plus">
                <img :src="PlusPng" class="w-full h-full object-contain" />
              </div> -->

              <div
                class="rounded-[10px] w-[288px] pt-[28px] pb-[39px] px-[16px] shrink-0 total"
                :style="`border: 1px solid #f7f7fb;background:url('${Img10Png}') no-repeat right bottom,#fdfdfe;`"
              >
                <div class="flex items-center title">
                  <div class="text-[#999] text-[14px] ml-[10px] tit">总CPC（$）</div>
                </div>
                <div class="pl-[10px] mt-[4px] flex items-baseline money">
                  ￥
                  <div class="text-[#101010] font-bold text-[20px] m">5</div>
                </div>
                <!-- <div class="pl-[15px] text-[#999] text-[12px] unit"> 单位-- </div> -->
              </div>
              <!-- <div class="mx-[4px] shrink-0 plus">
                <img :src="PlusPng" class="w-full h-full object-contain" />
              </div> -->

              <div
                class="rounded-[10px] w-[288px] pt-[28px] pb-[39px] px-[16px] shrink-0 total"
                :style="`border: 1px solid #f7f7fb;background:url('${Img11Png}') no-repeat right bottom,#fdfdfe;`"
              >
                <div class="flex items-center title">
                  <div class="text-[#999] text-[14px] ml-[10px] tit">总cpm（$）</div>
                </div>
                <div class="pl-[10px] mt-[4px] flex items-baseline money">
                  ￥
                  <div class="text-[#101010] font-bold text-[20px] m">0</div>
                  <!-- <div class="text-[#101010] font-bold text-[14px] d">.00</div> -->
                  <!-- <div
                    class="w-[2px] h-[11px] bg-[#101010] mx-[3px] line"
                    style="transform: rotate(15deg); transform-origin: center center"
                  ></div>
                  <div class="text-[#101010] font-bold text-[20px] m">0</div>
                  <div class="text-[#101010] font-bold text-[14px] d">.00</div> -->
                </div>

                <!-- <div class="pl-[15px] text-[#999] text-[12px] unit"> 单位$/￥ </div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </ContentWrap>

    <ContentWrap :show-border="false">
      <el-table :data="tableData" class-name="myTable">
        <el-table-column type="selection" width="55" />
        <el-table-column label="广告账户" prop="name" width="120" />
        <el-table-column label="广告账户ID" prop="name" width="120" />
        <el-table-column label="地区" prop="name" width="120" />
        <el-table-column label="广告花费（外币）" prop="name" width="150" />
        <el-table-column label="广告花费（外币）" prop="name" width="170" />
        <el-table-column label="展示次数" prop="name" width="80" />
        <el-table-column label="cpc（$）" prop="name" />
        <el-table-column label="cpm（$）" prop="name" />
        <el-table-column label="部门" prop="name" width="80" />
        <el-table-column label="人员" prop="name" />
        <el-table-column label="投放时间" prop="name" />
      </el-table>
      <Pagination
        v-model:limit="queryParams.pageSize"
        v-model:page="queryParams.pageNo"
        :total="total"
        @pagination="getList"
      />
    </ContentWrap>
  </div>
</template>
<script setup lang="ts">
import OrderStatusMenu from '@/views/trade/components/OrderStatusMenu.vue'
import type { TradeOrderQueryVO } from '@/api/mall/trade/order'
import RefreshPng from '@/assets/ad/refresh.png'
import EqPng from '@/assets/ad/eq.png'
import PlusPng from '@/assets/ad/plus.png'
import Img07Png from '@/assets/ad/img07.png'
import Img08Png from '@/assets/ad/img08.png'
import Img09Png from '@/assets/ad/img09.png'
import Img10Png from '@/assets/ad/img10.png'
import Img11Png from '@/assets/ad/img11.png'

const isDragging = ref(false)
const startX = ref(0)
const translateX = ref(0)
const scrollLeft = ref(0)
const scrollRightRef = ref<HTMLElement | null>(null)
const scrollboxRef = ref<HTMLElement | null>(null)
const minTranslateX = ref(0)

const total = ref(0)

// 表单搜索
const queryParams = ref({
  pageNo: 1, // 页数
  pageSize: 10, // 每页显示数量
  status: undefined, // 订单状态
  payChannelCode: undefined, // 支付方式
  createTime: undefined, // 创建时间
  terminal: undefined, // 订单来源
  type: undefined, // 订单类型
  deliveryType: undefined, // 配送方式
  logisticsId: undefined, // 快递公司
  pickUpStoreId: undefined, // 自提门店
  pickUpVerifyCode: undefined // 自提核销码
})

const startDrag = (event: MouseEvent) => {
  if (minTranslateX.value > 0) return
  isDragging.value = true
  startX.value = event.pageX
}

const stopDrag = () => {
  isDragging.value = false
}

const doDrag = (event: MouseEvent) => {
  if (!isDragging.value || minTranslateX.value > 0) return
  event.preventDefault()
  const x = event.pageX
  let walk = x - startX.value // 计算移动的距离
  translateX.value += walk // 更新位移
  if (translateX.value > 0) translateX.value = 0
  if (translateX.value < minTranslateX.value) translateX.value = minTranslateX.value
  startX.value = x // 更新起始位置
}

const tableData = []

const searchList: TradeOrderQueryVO[] = [
  {
    label: '广告账户名称',
    code: 'orderInfo',
    type: 'input'
  },
  {
    label: '广告账户ID',
    code: 'orderInfo',
    type: 'input'
  },
  {
    label: '部门',
    code: 'area',
    type: 'select',
    options: [
      {
        label: '中国',
        value: 'CN'
      },
      {
        label: '美国',
        value: 'US'
      }
    ]
  },
  {
    label: '投放时间',
    code: 'orderTime',
    type: 'dateRange'
  }
]

const orderStatusList = [
  {
    label: '按成员',
    value: 0
  },
  {
    label: '按部门',
    value: 1
  },
  {
    label: '按地区',
    value: 2
  },
  {
    label: '按商品',
    value: 3
  }
]
const handleOrderStatus = (status: number) => {
  //获取指定订单状态
  console.log(status, 'status')
}

const handleSearchQuery = (val) => {
  /***
   * 搜索框查询条件，目前考虑在查询时 queryParams = {...val,pageNo:1,pageSize:10}
   * */
  console.log(val, 'handleSearchQuery')
}

const getList = () => {}

onMounted(() => {
  nextTick(() => {
    if (scrollRightRef.value && scrollboxRef.value) {
      minTranslateX.value = scrollboxRef.value?.offsetWidth - scrollRightRef.value?.offsetWidth
    }
  })
})
</script>
<style lang="scss" scoped>
.scrollbox {
  overflow-x: auto; /* 允许横向滚动 */
}
:deep(.el-table.myTable thead tr) {
  background-color: #f7f7fb;
  border-radius: 4px;
  overflow: hidden;
}
:deep(.el-table.myTable thead th.el-table__cell) {
  background-color: #f7f7fb;
}
</style>
